<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <div style="width: 60px" @click="returnTap">取消</div>
      <span>{{ text }}</span>
      <div v-if="type != 3 && type != 1" style="width: 60px; color: #fff">
        取消
      </div>
      <span v-if="type == 1" style="color:#fff">编辑</span>
      <van-button v-if="type == 3"  size="small">发送</van-button>
    </div>
    <div class="input">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input type="text" class="inputAl" v-model="search" placeholder="搜索" />
    </div>
    <div class="list" v-if="type == 1">
      <div class="title">这个月</div>
      <div class="listA">
        <img src="../../assets/images/logo.png" alt="" />
        <img src="../../assets/images/logo.png" alt="" />
        <img src="../../assets/images/logo.png" alt="" />
      </div>
    </div>
    <div class="list" v-if="type == 2">
      <div class="message">
        <div class="messageA">
          <img src="../../assets/images/user_img.png" alt="" />
          <div style="font-size: 20px; color: #000">你的乳名123</div>
        </div>
        <span>测试用户 今天</span>
      </div>
    </div>
    <div class="list" v-if="type == 5">
      <div class="message">
        <div class="messageB">
          <div class="messageC">我说:</div>
          <div style="font-size: 20px; color: #000; margin-left: 20px">
            你的乳名123
          </div>
        </div>
        <div class="messageB">
          <div class="messageC">我说:</div>
          <div style="font-size: 20px; color: #000; margin-left: 20px">
            你的乳名123
          </div>
        </div>
        <span style="margin-top: 5px">测试用户 今天</span>
      </div>
    </div>
    <div class="list" v-if="type == 4">
      <div class="message">
        <div class="messageA" style="align-items: center">
          <img
            style="width: 30px; height: 30px"
            src="../../assets/images/yuyin.png"
            alt=""
          />
          <div style="font-size: 20px; color: #000">你的乳名123</div>
        </div>
        <span>测试用户 今天</span>
      </div>
    </div>
    <div class="list" v-if="type == 3">
      <div class="title">这个月</div>
      <div class="messageD">
        <van-checkbox
          style="margin-left: 20px"
          v-model="checked"
        ></van-checkbox>
        <img
          style="width: 50px; height: 50px; margin-left: 20px"
          src="../../assets/images/wendang.png"
          alt=""
        />
        <div class="messageDText">
          新建excel word 文档
          <span>17K</span>
          <span>发给我的世界10/17</span>
        </div>
        <van-icon class="fontIcone" name="more-o" />
      </div>
    </div>
    <div class="list" v-if="type == 7">
      <div class="title">中国</div>
      <div class="lst" @click="totap">
        <div class="lst1">吉安市</div>
        <div class="lst2">
          <span>1</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      text: "",
      type: 1,
      search: "",
      checked: false,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    totap() {
      this.$router.push({
        path: "/shoucangaddress",
      });
    },
  },
  created() {
    this.type = this.$route.query.type;
    console.log(this.type);
    if (this.type == 1) {
      this.text = "图片与视频";
    } else if (this.type == 2) {
      this.text = "链接";
    } else if (this.type == 3) {
      this.text = "文件";
    } else if (this.type == 4) {
      this.text = "语音";
    } else if (this.type == 5) {
      this.text = "聊天记录";
    } else if (this.type == 6) {
      this.text = "笔记";
    } else if (this.type == 7) {
      this.text = "位置";
    }
  },
};
</script>
<style scoped>
.all {
  background: #4AC7D7;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #4AC7D7;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #4AC7D7;
}
.input_icon {
  position: absolute;
  left: 43%;
  top: 15px;
  font-size: 18px;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
}
.title {
  height: 30px;
  font-size: 16px;
  margin-left: 20px;
  line-height: 30px;
}
.listA {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.listA img {
  width: 22.5%;
  margin-left: 2%;
  height: 100px;
}
.message {
  width: 96%;
  min-height: 100px;
  margin-left: 2%;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #7587a5;
  border-radius: 5px;
  margin-top: 5px;
}
.message img {
  width: 80px;
  height: 80px;
  margin: 0 20px;
}
.message span {
  font-size: 16px;
  margin-top: 20px;
  color: #bdbdbd;
  margin-left: 20px;
}
.messageA {
  display: flex;
}
.messageC {
  margin-left: 20px;
}
.messageD {
  width: 96%;
  min-height: 100px;
  margin-left: 2%;
  background: #fff;
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-top: 5px;
}
.messageDText {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  width: 55%;
}
.messageDText span {
  font-size: 16px;
  color: #9e9e9e;
  margin-top: 5px;
}
.fontIcone {
  font-size: 22px;
}
.lst {
  height: 60px;
  width: 94%;
  padding: 0 3%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lst2 {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #808080;
}
</style>